<template>
  <el-pagination v-mode:current-page="currentPage" v-mode:page-size="pageSize" :page-sizes="[100, 200, 300, 400]"
    :small="false" :disabled="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
    :total="total" class="pageControl" @size-change="handleSizeChange" @current-change="handleCurrentChange">
    <template #total>
      <span> 共 {{ total }} 条记录</span>
    </template>
  </el-pagination>
</template>
<script lang="ts" setup>
import { defineProps, toRefs } from 'vue'
import { type pageControlParam } from "@/type"
const pageControlParams = defineProps<{ pageControlParams: pageControlParam }>();
const { currentPage, pageSize, total } = toRefs<pageControlParam>(pageControlParams.pageControlParams)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.demo-pagination-block .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.pageControl{
  margin: 5px 0 0 5px;
  float: right;
}
</style>